<template>
  <div>
<div>嘿嘿嘿</div>
  <div v-if="true">111111</div>
  <div v-else-if="false">222222</div>
  <div v-else>333333</div>

  <div v-show="false">哈哈哈哈</div>

  <div v-show=" item == '好'" v-for="item in ['好','不好','还行']" >{{item}}</div>

  <input type="text" v-bind:value="inputValue">
  <button @click="showValue">按钮</button>
  <button v-on:click="showValue">按钮</button>
  <div>{{inputValue}}</div>
  <input v-model="inputValue">
    <span>初始化{{num}}</span>
    <span>初始化threeNum{{threeNum}}</span>
    <div>
      <button @click="sendGet">按钮调用get请求</button>
      <button @click="sendPost">按钮调用Post请求</button>
      <button @click="getWeather">天气api</button>
      <div>
        <div>省份：{{prcvince}}</div>
        <div>城市：{{weatherData.city}}</div>
        <div>城市：{{weatherData.weather}}</div>
        <div>城市：{{weatherData.temperature}}</div>
        <div>：{{weatherData.winddirection}}</div>
      </div>

      <div>
        <span>counter: {{counter.count}}</span>
        <span>counter: {{counter.doubleCount}}</span>
        <button @click="counter.increment()">加</button>
        <button @click="toHome">跳转</button>
        <button @click="toabout">跳转about</button>

        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>

import {computed, onMounted, provide, reactive, ref} from "vue";
import axios from "axios";
import {useCounterStore} from "@/store/index";
const counter = useCounterStore()
import router from "@/router/index.js";
function toHome(){
  router.replace('/home')
}

function toabout(){
  router.replace('/about')
}


let prcvince = ref()
let weatherData = reactive({})
function getWeather(){
  axios.get('https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=f0960d523d2cd0ff1dd327f57f4aca8c')
      .then(res =>{
        weatherData = res.data.lives[0]
        prcvince.value = res.data.lives[0].province
        console.log(weatherData)
      })
}prcvince
function sendGet(){
  axios.get('/api/student/getInfo?name=张三&age=18&gender=男生')
}

function sendPost(){
  const data = {
    name: '李四',
    gender: '女生',
    sn: 123465
  }
  axios.post('/api/student/update',data)
}



onMounted(()=>{
  // twoNum()
})

let num = ref(20)
const threeNum = computed(()=>{
  return  num.value*3
})


const name = ref('张三')
const arry = ref([])
const bool = ref(true)
const item = reactive({
  name: '11',
  age: 12
})

function twoNum(){
  bool.value
  num.value = num.value *2
  item.name
}

var inputValue = ''
function showValue(){
  console.log(inputValue)
}
</script>

<style scoped>

</style>
